<template>
	<view class="container">
		<!-- 日期分段器 -->
		<zy-segmented :values="items" :current="current" styleType="button" @onClickItem="" />
		<!-- 产值工资 -->
		<view class="production-wage">
			<view v-for="(item,index) in list" :key="item" class="item"
				:style="[{borderRight:`${index==list.length-1?'':'6rpx dashed #222'}`}]">
				<span style="font-weight: 800;"
					:style="[{color:`${index==2?(item.num<90?'#ff0000':'#42B983'):'#222222'}`}]">{{item.num}}</span></br>
				<span style="color: #999999;font-size: 30rpx;">{{item.title}}</span>
			</view>
		</view>
		<!-- 进度详情 -->
		<zy-group title="订单号进度详情">
			<scroll-view scroll-y="true" style="maxHeight:25vh">
				<view class="progress">
					<view v-for="(item,index) in progressList" :key="index" class="item">
						<span>{{item.title}}：</span>
						<view style="width: calc(100% - 200rpx);">
							<progress :percent="item.percent" :activeColor="item.color" border-radius="10px"
								:stroke-width="10" active show-info />
						</view>
					</view>
				</view>
			</scroll-view>
		</zy-group>
		<!-- 出入库情况 -->
		<zy-group title="出入库情况">
			<view style="width: 100%;height: 400rpx;">
				<qiun-data-charts type="mount" :opts="outInstorageOpts" :chartData="outInstorageData" ontouch />
			</view>
		</zy-group>
		<zy-group title="质量疵点数">
			<view class="quality">
				<view v-for="(item,index) in qualityList" :key="index" class="item">
				<span class="num">{{item.num}}</span></br>
				<span class="name">{{item.name}}</span>
			</view>
			</view>
		</zy-group>
	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				items: ["实时", "本周", "本月", "指定日期"], //时间分段器名称
				current: 0, //时间分段器默认初始值
				// 产值工资数据
				list: [{
					num: "100000",
					title: "产量（件）"
				}, {
					num: "60000",
					title: "工资（元）"
				}, {
					num: "95",
					title: "完工率（%）"
				}],
				// 进度数据
				progressList: [{
					title: "20230829-001",
					percent: 93.6,
					color: "#409efe"
				}, {
					title: "20230901-001",
					percent: 50,
					color: "#42B983"
				}, {
					title: "20230907-001",
					percent: 50,
					color: "#aaffff"
				}, {
					title: "20230908-001",
					percent: 50,
					color: "#55007f"
				}, {
					title: "20230909-001",
					percent: 50,
					color: "#55557f"
				}, {
					title: "20230901-001",
					percent: 50,
					color: "#00ff00"
				}, {
					title: "20230301-001",
					percent: 50,
					color: "#aaaaff"
				}, {
					title: "20230501-001",
					percent: 50,
					color: "#6b2bb9"
				}, {
					title: "20230601-001",
					percent: 50,
					color: "#b96e11"
				}, {
					title: "20237901-001",
					percent: 50,
					color: "#b95da1"
				}, {
					title: "20231901-001",
					percent: 50,
					color: "#253cb9"
				}],
				// 出入库图表数据
				outInstorageData: {},
				//您可以通过修改 config-ucharts.js 文件中下标为 ['column'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
				outInstorageOpts: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc", "#7bffd8", "#cb2182", "#fa3220", "#eeb5c0", "#3b6473", "#215a3e", "#934c30",
						"#da88ff"
					],
					padding: [15, 15, 0, 5],
					enableScroll: true,
					touchMoveLimit: 24,
					legend: {
						show: false,
					},
					xAxis: {
						disableGrid: true,
						scrollShow: true,
						itemCount: 4
					},
					yAxis: {
						data: [{
							min: 0
						}]
					},
					extra: {
						mount: {
							type: "bar",
							widthRatio: 0.3,
							borderWidth: 0,
							barBorderRadius: [
								50,
								50,
								50,
								50
							],
							linearType: "custom"
						}
					}
				},
				// 质量图表数据
				qualityList:[{
					num:"0.22%",name:"裁床"
				},{
					num:"0.05%",name:"裁剪车间"
				},{
					num:"0.08%",name:"缝制车间"
				},{
					num:"0.77%",name:"昆山恒泰科技"
				}]
			}
		},
		onReady() {
			this.getOutInstorageData();
			this.getQualityData()
		},
		methods: {
			// 获取出入库图表数据
			getOutInstorageData() {
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let res = {
						series: [{
							data: [{
								"name": "半成品出库",
								"value": 212998
							}, {
								"name": "半成品入库",
								"value": 2286077
							}, {
								"name": "采购入库",
								"value": 45705.7
							}, {
								"name": "成品入库",
								"value": 1559635
							}, {
								"name": "待发货成品出库",
								"value": 78281
							}, {
								"name": "待发货成品入库",
								"value": 87379
							}, {
								"name": "待装箱成品出库",
								"value": 68453
							}, {
								"name": "待装箱成品入库",
								"value": 97004
							}, {
								"name": "调拨出库",
								"value": 961857.6
							}, {
								"name": "调拨入库",
								"value": 7165
							}, {
								"name": "辅料出库",
								"value": 147410
							}, {
								"name": "辅料入库",
								"value": 3386399.9
							}, {
								"name": "领料出库",
								"value": 2144474.54
							}, {
								"name": "其他出库",
								"value": 35435
							}, {
								"name": "色布入库",
								"value": 364052
							}, {
								"name": "原料出库",
								"value": 252904
							}, {
								"name": "销售入库",
								"value": 810147.14
							}]
						}]
					};
					this.outInstorageData = JSON.parse(JSON.stringify(res));
				}, 500);
			},
		}
	};
</script>

<style lang="scss" scoped>
	.container {
		.production-wage {
			width: 100%;
			margin: 10rpx 0 20rpx 0;
			display: flex;

			.item {
				padding: 10rpx 0;
				width: 50%;
				margin: auto;
				text-align: center;
			}
		}
	}

	.out-instorage {
		margin: 10rpx;
	}

	.progress {
		padding: 0 20rpx;

		.item {
			display: flex;
			padding: 10rpx 0;

			span {
				width: 200rpx;
				color: #999999;
				margin: auto;
				font-size: 26rpx;
			}
		}
	}

	.quality {
		display: flex;
		width: 100%;
  flex-flow: row wrap;

		.item {
			width: calc(50% - 100rpx);
			margin: 20rpx;
			background: linear-gradient(to right, #FF512F, #DD2476);
			padding: 30rpx;
			border-radius: 20rpx;
			color: #ffffff;
				text-align: center;
			.num{
				text-align: center;
				font-size: 60rpx;
			}
			.name{
				text-align: center;
				margin-top: 20rpx;
			}
		}
	}
</style>